<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>页头</title>
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/page-learing-article.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/page-learing-index.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/page-header.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/el/index.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/css/main.css" />

    <script src="http://www.51xuecheng.cn/static/js/vue/vue.min.js"></script>
    <script src="http://www.51xuecheng.cn/static/js/jwt-decode/jwt-decode.min.js"></script>
    <script src="http://www.51xuecheng.cn/static/js/base64.min.js"></script>
    <script src="http://www.51xuecheng.cn/static/js/axios/axios.min.js"></script>
    <script src="http://www.51xuecheng.cn/static/js/querystring/index.js"></script>
    <script src="http://www.51xuecheng.cn/static/js/util.js"></script>
    <script src="http://www.51xuecheng.cn/static/js/public.js"></script>
    <script src="http://www.51xuecheng.cn/static/js/login.js"></script>
    <script src="http://www.51xuecheng.cn/static/css/el/index.js"></script>
</head>
<body >
<div id="app">
<!--头部导航-->
<header>
    <div class="learingHeader">
        <nav class="navbar">
            <div class="">
                <div class="logo"><img src="http://www.51xuecheng.cn/static/img/asset-logoIco.png" width="100%" alt=""></div>
                <div class="nav-list">
                    <ul class="nav navbar-nav">
                        <li ><a href="http://www.51xuecheng.cn">首页</a></li>
                        <li><a href="http://www.51xuecheng.cn/course/search.html">课程</a></li>
                        <li><a href="#">职业规划</a></li>
                        <li></li>
                    </ul>
                </div>

                <div class="sign-in">
                    <!-- 未登录 -->
                    <!-- <a href="#">登录 </a> <span> | </span> <a href="#"> 注册</a>-->
                    <!-- 登录 -->
                    <!--<a href="#" class="personal"><span class="personalIco"></span>消息</a>-->
                    <span v-if="logined == true">欢迎{{this.user.name}}</span>
                    <a href="javascript:;"
                       @click="logout"
                       v-if="logined == true">退出</a>
                    <a href="javascript:;"
                       @click="showlogin"
                       v-if="logined == false">登录&nbsp;|&nbsp;注册</a>
                    <a href="http://ucenter.51xuecheng.cn/"
                       class="personal"
                       target="_blank">我的学习</a>
                    <a href="http://teacher.51xuecheng.cn/"
                       class="personal"
                       target="_blank">教学机构</a>
                    <!--<a href="#" class="myInfo"><img src="img/asset-myImg.jpg" alt="">个人中心</a>-->
                </div>
                <!--<div class="starch">
                    <div><input type="text" class="input-search" placeholder="输入查询关键词"></div>
                    <div class="searchword"><a href="">搜索</a> </div>
                </div>-->
                <div class="starch">
                    <div><input type="text" id="keywords-text" class="input-search" v-model="keywords" @keyup.enter="search"  placeholder="输入查询关键词"></div>
                    <div class="searchword"><a @click="search">搜索</a> </div>
                </div>
            </div>
        </nav>
    </div>

</header>
</div>
<script type="text/x-template" id="login">
<div>login....</div>
</script>
<script>

  var headVm= new Vue({   //创建一个Vue的实例
        el: "#app", //挂载点是id="app"的地方

        data: {
            keywords: '',
            loginFormVisible: false,
            activeName: 'login',
            editLoading: false,

            formLabelWidth: '120px',
            user:{
                userid:'',
                username: '',
                userpic: '',
                name:''
            },
            logined:false
        },
        methods: {
            search() {
                if (this.keywords === '') {
                    window.location = "http://www.51xuecheng.cn/course/search.html"
                } else {
                    let keywords = encodeURIComponent(this.keywords)
                    window.location = "http://www.51xuecheng.cn/course/search.html?keywords="+keywords
                }
            },
           logout: function () {
                this.$confirm('确认退出吗?', '提示', {
                }).then(() => {
                    logout()
                    
                }).catch(() => {

                });
            },
            refresh_user:function(){
                let activeUser= getActiveUser();
                if(activeUser){
                    this.logined = true
                    this.user = activeUser;
                    console.log(activeUser)
                }
                

            },
//             refresh_user:function(){
//                 //从sessionStorage中取出当前用户
//                 let activeUser= getActiveUser();
//                 //取出cookie中的令牌
//                 let uid = getCookie("uid")
// //                alert(uid)
//                 //console.log(activeUser)
//                 if(activeUser && uid && uid == activeUser.uid){
//                     this.logined = true
//                     this.user = activeUser;
//                 }else{
//                     if(!uid){
//                         return ;
//                     }
//                     //请求查询jwt
//                     getjwt().then((res) => {
//                         if(res.success){
//                             let jwt = res.jwt;
//                             let activeUser = getUserInfoFromJwt(jwt)
//                             if(activeUser){
//                                 this.logined = true
//                                 this.user = activeUser;
//                                 setUserSession("activeUser",JSON.stringify(activeUser))
//                             }
//                         }
//                     })
//                 }
//             },
            resetForm:function(formName){
                this.$refs[formName].resetFields();
            },
            showlogin: function(){
                window.location = "http://www.51xuecheng.cn/sign.html?returnUrl="+ Base64.encode(window.location)
            }
        },
       created() {

        },
        mounted(){
            //刷新当前用户
            this.refresh_user()
        }
    })
</script>
</body>
</html>
